<template>
  <div>
    <a-modal 
      :title="title" 
      :visible="isVisible"
      :ok-text="okText"
      cancel-text="取消"
      :ok-button-props="{
        props: {
          loading: isLoading
        }
      }"
      :width="modalWidth"
      :body-style="modalBodyStyle"
      @ok="handleOk"
      @cancel="handleCancel">
      
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="描述信息">
          <a-input
            v-decorator="[
              'desc'
            ]"
          />
        </a-form-item> 

        <a-form-item v-bind="formItemLayout" label="开始节点">
          <a-select
            v-decorator="[
              'nodeId',
              {
                rules: [
                  { required: true, message: '必选' }
                ]
              }
            ]"
          >
            <a-select-option
              v-for="item, index in nodes"
              :key="item.id"
            >
              {{ item.name + '(' + item.childrenCount + ')' }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item v-bind="formItemLayout" label="结束节点">
          <a-select
            v-decorator="[
              'nextNodeId',
              {
                rules: [
                  { required: true, message: '必选' },
                  { validator: vlidateSelectNode }
                ],
                validateFirst: true
              }
            ]"
          >
            <a-select-option
              v-for="item, index in nodes"
              :key="item.id"
            >
              {{ item.name + '(' + item.childrenCount + ')' }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="es6">
module.exports = asyncRequire([
    'mixins',
    'alias!@PAGE/components/localNodes',
], function(MXS, NodeAPI, resolve, reject) {
  resolve({
    name: 'FlowChartLineAE',
    mixins: [MXS.CommonMixin, MXS.ModalMixin, MXS.ValidatorMixin, MXS.AntdMixin],
    data () {
      let allData = NodeAPI.findAll();
      let nodes = allData.nodes;
      let lines = allData.lines;
      // 按照 node 关联的节点数量排序, 从少到多
      let newNodes = nodes.map(node => {
        return {
          id: node.id,
          name: node.name,
          childrenCount: lines.filter(line => line.nodeId === node.id).length
        };
      }).sort((a, b) => a.childrenCount > b.childrenCount ? 1 : -1)
      
      return {
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 18 },
          }
        },
        modalWidth: '600px',
        modalBodyStyle: {
          width: '580px',
          border: 'none'
        },
        nodes: newNodes
      }
    },
    created () {
      this.form = this.$form.createForm(this, {
          name: this.isEdit ? 'edit_form' : 'add_form',
          mapPropsToFields: () => {
              return this.mapPropsToFields({
                  formRef: this.$form,
                  dataRef: this.data,
              });
          }
      });
    },
    computed: {
        title () {
            return this.isEdit ? '编辑连线' : '添加连线';
        },
        okText () {
            return this.isEdit ? '修改' : '新增';
        }
    },
    methods: {
      vlidateSelectNode (rule, value, callback) {
        let nodeId = this.form.getFieldValue('nodeId');
        if(nodeId === value) {
          return callback('开始节点不能和结束节点一样');
        } 
        callback();
      },
      handleSubmit (e) {
        e.preventDefault()
      },
      handleCancel () {
        this.close();
      },
      handleOk () {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.showLoading();
            Promise.resolve(this.showLoading())
                .then(() => {
                  if(this.isEdit) {
                    values.id = this.data.id;
                    values.desc = values.desc||'';
                    NodeAPI.modifyLine(values);
                  } else {
                    NodeAPI.addLine(values);
                  }
                })
                .then(data => {
                    this.$message.success(this.isEdit ? '编辑成功' : '添加成功');
                    this.close({ $hook: true });
                })
                .finally(this.hideLoading);
          }
        });
      }
    }
  });
});
</script>

<style scoped>
  
</style>
